<template>
	<view>
		<navbar title='充值' type='1'></navbar>
		<view class="rechargetype">
			<image src="../../static/sel.png" mode=""></image>
			<view class="">TOPS</view>
		</view>
		<view class="rechargeline">
			<view class="rechargeline_name">充值网络</view>
			<view class="rechargeline_bottom flex-between" @click="overlayshow=true">
				<view class="text">{{line?line:'选择网络'}}</view>
				<image src="../../static/wallet/down.png" mode=""></image>
			</view>
		</view>
		<overlay :overlayshow='overlayshow' :type='type' @btnsel='isbtnsel' @close='overlayshow=false'></overlay>
		<view class="recharge">
			<view class="qrcode">
				<uqrcode ref="uqrcode" canvas-id="qrcode" size="120" value="https://uqrcode.cn/doc" :options="{ margin: 10 }"></uqrcode>
			</view>
			<view class="recharge_name">充值地址</view>
			<view class="recharge_address flex-between">
				<view class="" style="width: 500rpx;">
					<u--text :lines="2" size='14' text="sasfafsafwefdwzxvasfwfdsdfsdfdsfsdfsdfs"></u--text>
				</view>

				<image src="../../static/wallet/copy.png" @click="copy()" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import overlay from "./overlay.vue"
	import navbar from "@/components/navbar.vue"
	export default {
		components:{
			overlay,navbar
		},
		data() {
			return {
				text: '11111111',
				size: 150,
				codeImg: "",
				colorDark: '#000000',
				colorLight: '#ffffff',
				show:false,
				overlayshow:false,
				line:'',
				type:1,
				imgbox:[]
			}
		},
		onLoad() {
			this.$fun.ajax.post('/config/invitation', {}).then(res => {
				if (res.code == 1) {
					let data = []
						res.data.forEach((item) => {
							data.push(this.$fun.imgUrl(item.image))
						})
						this.imgbox = data
						this.list = res.data
						console.log(this.list)
				}
			})
			// #ifdef MP-WEIXIN
			this.getaccesstoken()
			// #endif
		},
		onShow() {
			
		},
		methods: {
			isbtnsel(res){
				this.line=res
				this.overlayshow=false
			},
			copy(text){
				uni.setClipboardData({
					data: text,
					success: () => {
						this.showToast && uni.$u.toast('复制成功')
					},
					fail: () => {
						this.showToast && uni.$u.toast('复制失败')
					},
					complete: () => {
						// this.showTooltip = false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.rechargetype{
	width: 690rpx;
	height: 120rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	padding: 30rpx;
	box-sizing: border-box;
	margin: 30rpx auto;
	image{
		width: 68rpx;
		height: 68rpx;
		margin-right: 20rpx;
	}
}
.rechargeline{
	width: 690rpx;
	height: 182rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 30rpx;
	box-sizing: border-box;
	margin: 0 auto;
	&_name{
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}
	&_bottom{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		width: 630rpx;
		height: 64rpx;
		background: #F2F2F2;
		border-radius: 16rpx;
		margin: 30rpx 0 0;
		padding: 0 30rpx;
		align-items: center;
		box-sizing: border-box;
		image{
			width: 32rpx;
			height: 32rpx;
		}
	}
}
.recharge{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	margin: 30rpx auto;
	padding: 30rpx;
	box-sizing: border-box;
	.uqrcode{
		margin:0 auto;
	}
	.qrcode{
		margin: 60rpx auto 60rpx;
	}
	&_name{
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
	}
	&_address{
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-top: 20rpx;
		image{
			width: 32rpx;
			height: 32rpx;
		}
	}
}

</style>
